<template>
  <view class="container">
    <view class="form-group">
      <view class="form-item">
        <text class="label">原密码</text>
        <input 
          class="input" 
          type="password" 
          v-model="oldPassword"
          placeholder="请输入原密码"
          password
        />
      </view>
      <view class="form-item">
        <text class="label">新密码</text>
        <input 
          class="input" 
          type="password" 
          v-model="newPassword"
          placeholder="请输入新密码"
          password
        />
      </view>
      <view class="form-item">
        <text class="label">确认密码</text>
        <input 
          class="input" 
          type="password" 
          v-model="confirmPassword"
          placeholder="请再次输入新密码"
          password
        />
      </view>
    </view>
    
    <view class="tips">
      <text class="tip-text">密码要求：</text>
      <text class="tip-item">• 长度为8-20个字符</text>
      <text class="tip-item">• 必须包含字母和数字</text>
      <text class="tip-item">• 区分大小写</text>
    </view>
    
    <view class="btn-area">
      <button class="submit-btn" @click="submitChange">确认修改</button>
    </view>
  </view>
</template>

<script>
import { updateUserPwd } from '../../api/user.js'

export default {
  data() {
    return {
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
    }
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: '修改密码'
    })
  },
  methods: {
    // 验证密码
    validatePassword() {
      if (!this.oldPassword) {
        uni.showToast({
          title: '请输入原密码',
          icon: 'none'
        })
        return false
      }
      
      if (!this.newPassword) {
        uni.showToast({
          title: '请输入新密码',
          icon: 'none'
        })
        return false
      }
      
      if (!this.confirmPassword) {
        uni.showToast({
          title: '请确认新密码',
          icon: 'none'
        })
        return false
      }
      
      if (this.newPassword !== this.confirmPassword) {
        uni.showToast({
          title: '两次输入的密码不一致',
          icon: 'none'
        })
        return false
      }
      
      // 密码格式验证：8-20位，必须包含字母和数字
      const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,20}$/
      if (!passwordRegex.test(this.newPassword)) {
        uni.showToast({
          title: '密码格式不正确',
          icon: 'none'
        })
        return false
      }
      
      return true
    },
    
    // 提交修改
    submitChange() {
      if (!this.validatePassword()) return
      
      uni.showLoading({
        title: '提交中...'
      })
      
      updateUserPwd(this.oldPassword, this.newPassword).then(res => {
        if (res.code === 200) {
          uni.showToast({
            title: '密码修改成功',
            icon: 'success'
          })
          
          setTimeout(() => {
            // 返回个人信息页面
            uni.navigateBack()
          }, 1500)
        } else {
          uni.showToast({
            title: res.msg || '修改失败',
            icon: 'none'
          })
        }
      }).catch(() => {
        uni.showToast({
          title: '修改失败',
          icon: 'none'
        })
      }).finally(() => {
        uni.hideLoading()
      })
    }
  }
}
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.form-group {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 0 20rpx;
}

.form-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.form-item:last-child {
  border-bottom: none;
}

.label {
  width: 140rpx;
  font-size: 28rpx;
  color: #333;
}

.input {
  flex: 1;
  height: 88rpx;
  font-size: 28rpx;
  color: #333;
}

.tips {
  margin-top: 30rpx;
  padding: 20rpx;
}

.tip-text {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 10rpx;
  display: block;
}

.tip-item {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 6rpx;
  display: block;
}

.btn-area {
  margin-top: 60rpx;
  padding: 0 20rpx;
}

.submit-btn {
  background-color: #007aff;
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
  height: 88rpx;
  line-height: 88rpx;
}

.submit-btn:active {
  opacity: 0.8;
}
</style> 